// H5端展示页面 - Konsta UI 组件库（TypeScript 版本）
import { useState } from 'react'
import {
  App as KonstaApp,
  Page,
  Navbar,
  Button,
  Block,
  BlockTitle,
  List,
  ListItem,
  ListInput,
  Link,
} from 'konsta/react'

export function App() {
  // 主题状态：'ios' 或 'material' (Android)
  const [theme, setTheme] = useState<'ios' | 'material'>('material')
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')

  return (
    <KonstaApp theme={theme}>
      <Page>
        {/* 导航栏 */}
        <Navbar
          title="金融平台 H5"
          right={
            <Link
              onClick={() => setTheme(theme === 'ios' ? 'material' : 'ios')}
            >
              {theme === 'ios' ? '🤖 Android' : '🍎 iOS'}
            </Link>
          }
        />

        {/* 主题状态 */}
        <Block strong inset>
          <p className="text-center">
            当前主题:{' '}
            <strong>{theme === 'ios' ? 'iOS' : 'Android Material'}</strong>
          </p>
          <p className="mt-2 text-center text-sm">点击右上角切换主题</p>
        </Block>

        {/* 默认按钮 */}
        <BlockTitle>Default Buttons</BlockTitle>
        <Block strong inset className="space-y-2">
          <div className="grid grid-cols-3 gap-x-4">
            <Button>Button</Button>
            <Button className="k-color-brand-red">Button</Button>
            <Button>Button</Button>
          </div>

          <div className="grid grid-cols-3 gap-x-4">
            <Button outline>Outline</Button>
            <Button className="k-color-brand-red" outline>
              Outline
            </Button>
            <Button outline>Outline</Button>
          </div>

          <div className="grid grid-cols-3 gap-x-4">
            <Button clear>Clear</Button>
            <Button className="k-color-brand-red" clear>
              Clear
            </Button>
            <Button clear>Clear</Button>
          </div>

          <div className="grid grid-cols-3 gap-x-4">
            <Button tonal>Tonal</Button>
            <Button className="k-color-brand-red" tonal>
              Tonal
            </Button>
            <Button tonal>Tonal</Button>
          </div>
        </Block>

        {/* 圆角按钮 */}
        <BlockTitle>Rounded Buttons</BlockTitle>
        <Block strong inset className="space-y-2">
          <div className="grid grid-cols-3 gap-x-4">
            <Button rounded>Button</Button>
            <Button rounded className="k-color-brand-green">
              Button
            </Button>
            <Button rounded>Button</Button>
          </div>

          <div className="grid grid-cols-3 gap-x-4">
            <Button rounded outline>
              Outline
            </Button>
            <Button rounded outline className="k-color-brand-green">
              Outline
            </Button>
            <Button rounded outline>
              Outline
            </Button>
          </div>

          <div className="grid grid-cols-3 gap-x-4">
            <Button rounded clear>
              Clear
            </Button>
            <Button rounded clear className="k-color-brand-green">
              Clear
            </Button>
            <Button rounded clear>
              Clear
            </Button>
          </div>
        </Block>

        {/* 大按钮 */}
        <BlockTitle>Large Buttons</BlockTitle>
        <Block strong inset className="space-y-2">
          <div className="grid grid-cols-3 gap-x-4">
            <Button large>Button</Button>
            <Button large className="k-color-brand-yellow">
              Button
            </Button>
            <Button large rounded>
              Button
            </Button>
          </div>

          <div className="grid grid-cols-3 gap-x-4">
            <Button large outline>
              Outline
            </Button>
            <Button large outline className="k-color-brand-yellow">
              Outline
            </Button>
            <Button large rounded outline>
              Outline
            </Button>
          </div>

          <div className="grid grid-cols-3 gap-x-4">
            <Button large clear>
              Clear
            </Button>
            <Button large clear className="k-color-brand-yellow">
              Clear
            </Button>
            <Button large rounded clear>
              Clear
            </Button>
          </div>
        </Block>

        {/* 小按钮 */}
        <BlockTitle>Small Buttons</BlockTitle>
        <Block strong inset className="space-y-2">
          <div className="grid grid-cols-3 gap-x-4">
            <Button small>Button</Button>
            <Button small>Button</Button>
            <Button small rounded>
              Button
            </Button>
          </div>

          <div className="grid grid-cols-3 gap-x-4">
            <Button small outline>
              Outline
            </Button>
            <Button small outline>
              Outline
            </Button>
            <Button small rounded outline>
              Outline
            </Button>
          </div>

          <div className="grid grid-cols-3 gap-x-4">
            <Button small clear>
              Clear
            </Button>
            <Button small clear>
              Clear
            </Button>
            <Button small rounded clear>
              Clear
            </Button>
          </div>
        </Block>

        {/* 带阴影的按钮 */}
        <BlockTitle>Raised Buttons</BlockTitle>
        <Block strong inset className="space-y-2">
          <div className="grid grid-cols-3 gap-x-4">
            <Button raised>Button</Button>
            <Button raised>Button</Button>
            <Button raised rounded>
              Button
            </Button>
          </div>

          <div className="grid grid-cols-3 gap-x-4">
            <Button raised outline>
              Outline
            </Button>
            <Button raised outline>
              Outline
            </Button>
            <Button raised rounded outline>
              Outline
            </Button>
          </div>

          <div className="grid grid-cols-3 gap-x-4">
            <Button raised clear>
              Clear
            </Button>
            <Button raised clear>
              Clear
            </Button>
            <Button raised rounded clear>
              Clear
            </Button>
          </div>
        </Block>

        {/* 禁用按钮 */}
        <BlockTitle>Disabled Buttons</BlockTitle>
        <Block strong inset className="space-y-2">
          <div className="grid grid-cols-3 gap-x-4">
            <Button disabled>Button</Button>
            <Button disabled outline>
              Outline
            </Button>
            <Button disabled clear>
              Clear
            </Button>
          </div>
        </Block>

        {/* 输入框展示 */}
        <BlockTitle>Input Fields</BlockTitle>
        <List strongIos insetIos>
          <ListInput
            label="姓名"
            type="text"
            placeholder="请输入姓名"
            value={name}
            onChange={(e) => setName(e.target.value)}
            clearButton
          />

          <ListInput
            label="邮箱"
            type="email"
            placeholder="请输入邮箱"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            clearButton
          />

          <ListInput label="密码" type="password" placeholder="请输入密码" />
        </List>

        {/* 列表展示 */}
        <BlockTitle>List Items</BlockTitle>
        <List strongIos insetIos>
          <ListItem title="个人资料" after="›" link />

          <ListItem title="通知设置" after="›" link />

          <ListItem title="安全中心" subtitle="密码和隐私设置" after="›" link />

          <ListItem
            title="使用统计"
            after={<span className="text-gray-500">1.2K</span>}
            link
          />

          <ListItem title="关于我们" after="v1.0.0" link />
        </List>

        {/* 底部说明 */}
        <Block strong inset className="mb-8">
          <h3 className="mb-2 font-bold">
            <span role="img" aria-label="星星">
              ✨
            </span>{' '}
            Konsta UI 特性
          </h3>
          <ul className="space-y-2 text-sm">
            <li>• 支持 iOS 和 Android Material 双主题</li>
            <li>• 完整的移动端组件库</li>
            <li>• 使用 Tailwind CSS 进行样式定制</li>
            <li>• 原生般的触摸体验</li>
            <li>• 响应式设计，适配各种屏幕</li>
          </ul>
          <p className="mt-4 text-center text-xs text-gray-500">
            <span role="img" aria-label="提示">
              💡
            </span>{' '}
            点击右上角切换 iOS / Android 主题
          </p>
        </Block>
      </Page>
    </KonstaApp>
  )
}

export default App
